<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<view class="top">
			<text>温馨提示：因流量统计存在延迟，当前页面用量与真实用量可能存在误差。建议暂停使用一段时间后，重新查询。</text>
		</view>
		<view class="istext">
			<text>套餐详情</text>
		</view>
		<view class="content">
			<uni-list :border="false">
				<uni-list-item v-for="item in is_discharge_record" :key="item.id">
					<template v-slot:body>
						<view>
							<view class="uni_list">
								<view class="drop"></view>
								<text>{{item.package_name}}</text>
							</view>
							<view class="box">
								<view class="text">
									<text>状态：{{item.state}}</text>
								</view>
								<view class="text">
									<text>有效期：{{item.effective_date}}至{{item.closing_date}}</text>
								</view>

								<view class="progress-container">
									<view class="progress-bar"
										:style="{ width: item.used_traffic/item.total_traffic*100 + '%' }"></view>
								</view>
								<view class="text_bottom">
									<text>已用：{{item.used_traffic}}G</text>
									<text>剩余：{{ (item.total_traffic - item.used_traffic).toFixed(2) }}G /
										{{item.total_traffic}}G</text>
								</view>
							</view>
						</view>

					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="bottom">
			<text>没有更多了~~</text>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const progress = ref(30);
	const discharge_record = ref([{
		id: '1',
		package_name: '100G(1天)体验',
		state: '到期',
		effective_date: '2023-10-15 19:43:54',
		closing_date: '2023-10-16 19:43:54',
		total_traffic: '100',
		used_traffic: '1.66',
	}, {
		id: '2',
		package_name: '10G/30天有效J',
		state: '使用完毕',
		effective_date: '2023-10-16 19:43:54',
		closing_date: '2023-11-15 19:43:54',
		total_traffic: '10',
		used_traffic: '10.00',
	}, {
		id: '3',
		package_name: '月享300G套餐',
		state: '退订',
		effective_date: '2023-11-15 19:43:54',
		closing_date: '2023-12-15 19:43:54',
		total_traffic: '300',
		used_traffic: '257.59',
	}, {
		id: '4',
		package_name: '月享300G套餐',
		state: '退订',
		effective_date: '2023-12-15 19:43:54',
		closing_date: '2024-01-14 19:43:54',
		total_traffic: '300',
		used_traffic: '198.08',
	}, {
		id: '5',
		package_name: '月享300G套餐',
		state: '退订',
		effective_date: '2024-01-14 19:43:54',
		closing_date: '2024-02-13 19:43:54',
		total_traffic: '300',
		used_traffic: '276.91',
	}, {
		id: '6',
		package_name: '月享300G套餐',
		state: '退订',
		effective_date: '2024-02-13 19:43:54',
		closing_date: '2024-03-14 19:43:54',
		total_traffic: '300',
		used_traffic: '240.42',
	}, {
		id: '7',
		package_name: '月享300G套餐',
		state: '未生效',
		effective_date: '2024-03-14 19:43:54',
		closing_date: '2024-04-13 19:43:54',
		total_traffic: '300',
		used_traffic: '0',
	}])
	const is_discharge_record = ref(discharge_record.value.reverse())
</script>

<style lang="scss" scoped>
	.top {
		width: 84vw;
		padding: 8vw 8vw 2vw;
		font-size: 13px;
		color: rgb(0, 85, 255);
	}

	.istext {
		width: 84vw;
		padding: 2vw 8vw;
	}

	.content {
		width: 92vw;
		padding: 0 4vw;

		.uni_list {
			display: flex;
			align-items: center;
			font-size: 14px;

			.drop {
				width: 7px;
				height: 7px;
				border-radius: 10px;
				margin-right: 5px;
				background-color: #154EA3;
			}
		}

		.box {
			width: calc(84vw - 12px);
			color: #999;
			font-size: 12px;
			margin-left: 12px;

			.text {
				margin: 7px 0;
			}

			.progress-container {
				margin: 10px 0;
				width: 100%;
				background-color: #eee;
				height: 10px;
				border-radius: 10px;
				position: relative;
				overflow: hidden;

				.progress-bar {
					height: 100%;
					background-color: #0064F9;
					border-radius: 10px;
				}
			}

			.text_bottom {
				display: flex;
				justify-content: space-between;
				color: #545454;
			}
		}
	}

	.bottom {
		text-align: center;
		padding: 10vh 0;
		color: #999;
		font-size: 14px;
	}
</style>